<template>
    <div style="background:#f2f3f5;">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <img :src="img" style="width: 15rem;">
            </van-swipe-item>
        </van-swipe>
        <div class="section">
            <div class="price">
                <div class="price-current">
                    <span style="fontSize:.56rem;marginRight:.08rem;color:#1BA784;">￥</span>
                    <span style="fontSize:.88rem;color:#1BA784;">{{minPrice}}</span>
                </div>
                <div class="price-origin">
                    <span style="fontSize:.48rem;marginRight:.16rem;color:#969799;">价格</span>
                    <span style="fontSize:.48rem;color:#969799;">￥</span>
                    <del style="fontSize:.48rem;color:#969799;">{{price}}</del>
                </div>
            </div>
            <div class="title">{{name}}</div>
            <div class="brief">{{introduce}}</div>
        </div>
        <div class="stock">
            <p>邮费：{{isFree}}</p>
            <p>剩余{{stores}}</p>
        </div>
        <div class="ticket">
            <p>领券</p>
            <van-icon name="arrow" />
        </div>
        <div class="serve">
            <div>服务</div>
            <div>收货后结算 · 支持退款退货</div>
        </div>
        <div class="search">
            <div>
                <span>选择</span>
                <span>版本 颜色</span>
            </div>
            <van-icon name="arrow" />
        </div>
        <div class="evaluate">
            <div class="evaluate-top">
                <div>评价(3)</div>
                <div class="all">
                    <span>全部评价</span>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="evaluate-content">
                <div class="content-head">
                    <img src="">
                    <div class="name">J***nm</div>
                </div>
                <div class="content-foot">
                    <p>系统默认好评</p>
                    <p class="edit">版本</p>
                </div>
            </div>
        </div>
        <p class="p">商品详情</p>
        <div class="img" v-html="content"></div>
        <div class="buy">
            <div class="icon">
                <van-icon name="thumb-circle-o" size=".72rem" />
                <p>首页</p>
            </div>
            <div class="icon">
                <van-icon name="chat-o" size=".72rem" />
                <p>客服</p>
            </div>
            <div class="icon">
                <van-icon name="cart-o" size=".72rem" />
                <p>购物车</p>
            </div>
            <div class="left" @click="showPopup">加入购物车</div>
            <div class="right">立即购买</div>
            <van-popup v-model="show" closeable position="bottom">
                <div class="show-head">
                    <img :src="img" />
                    <div class="show-title">
                        <p style="fontSize: .56rem;marginBottom:.2rem;">{{name}}</p>
                        <p style="fontSize: .88rem;color: #1BA784;font-weight: 700;"><span
                                style="fontSize: .56rem;margin-right: .08rem;">￥</span>{{minPrice}}</p>
                        <p style="fontSize: .48rem;color: #969799;margin-top: .2rem;">剩余{{stores}}件</p>
                        <p style="fontSize: .48rem;color: #969799;margin-top: .2rem;">请选择颜色</p>
                    </div>
                </div>
                <div class="show-body">
                    <div class="show-group" v-for="i in type" :key="i.id">
                        <div class="group-hd">{{i.name}}</div>
                        <div class="checked">
                            <div v-for="e in i.childsCurGoods" :key="e.id">
                                <span class="color-list" :class="{cla:option.find(op=>op.optionValueId == e.id)}"
                                    @click="current(i.id,e.id)">{{e.name}}</span>
                            </div>
                            <!-- <div>
                                <label v-for="e in i.childsCurGoods" :key="e.id">
                                    <input type="radio" :name="e.propertyId" class="check">
                                    <span class="color-list" @click="current(i.id,e.id)">{{e.name}}</span>
                                </label>
                            </div> -->
                        </div>
                    </div>
                    <div class="sum">
                        <div>购买数量</div>
                        <div class="num">
                            <button class="reduce" @click="value>1? value-- :''"></button>
                            <input type="text" v-model="value">
                            <button class="add" @click="value ++"></button>
                        </div>
                    </div>
                </div>
                <div class="action">
                    <button class="action-btn" @click="submit">确定</button>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            img: "",
            price: "",
            minPrice: '',
            name: '',
            introduce: "",
            stores: "",
            show: false,
            type: "",
            content: "",
            value: 1,
            logistics: "",
            option: [],
            isFree: "无需配送"
        }
    },
    methods: {
        showPopup() {
            this.show = true;
        },
        submit() {
            this.request({
                method: "post",
                url: "/shopping-cart/add",
                data: {
                    goodsId: this.$route.query.id,
                    number: this.value,
                    sku: JSON.stringify(this.option)
                }
            }).then(res => {
                console.log(res)
                this.$router.push("/cart")
            })
        },
        current(i, e) {
            var op = this.option.find(item => item.optionId == i)
            if (op) {
                this.option.forEach((item, index) => {
                    if (item.optionId == i && item.optionValueId == e) {
                        this.option.splice(index, 1)
                    } else if (item.optionId == i) {
                        item.optionValueId = e
                    }
                })

            } else {
                this.option.push({
                    optionId: i,
                    optionValueId: e
                })
            }
            console.log(this.option)
        }
    },
    mounted() {
        if (!this.$route.query.id) {
            this.$router.push("/home")
        }
        this.request({
            method: "get",
            url: "/shop/goods/detail",
            params: {
                id: this.$route.query.id
            }
        }).then(res => {
            let data = res.data
            let base = data.basicInfo



            this.logistics = data.logistics
            this.content = data.content
            this.img = data.pics2
            this.price = base.originalPrice // 初始价格
            this.minPrice = base.minPrice  // 当前价格
            this.name = base.name
            this.type = data.properties
            this.introduce = base.characteristic
            this.stores = base.stores

            // console.log(this.logistics.isFree)
            if (this.logistics) {
                this.isFree ? "包邮" : "不包邮"
            }
        })
    }
}
</script>
<style scoped>
.p {
    font-size: .64rem;
    font-weight: 700;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    background: white;
}

.img {
    box-sizing: border-box;
    background: #fff;
    padding: 0 .4rem;
    padding-top: .4rem;
    overflow: hidden;
    font-size: .64rem;
    line-height: 1.5;
    text-align: left;
    word-wrap: break-word;
}

.img p {
    width: 100%;
}

.p::before {
    content: "//////";
    font-weight: 300;
    font-size: .32rem;
    margin-right: .4rem;
}

.p::after {
    content: "//////";
    font-weight: 300;
    font-size: .32rem;
    margin-left: .4rem;
}

.check {
    display: none;
}

.check:checked~span {
    color: #1ba784;
    background: #d9f6ef;
}

.cla {
    color: #1ba784;
    background: #d9f6ef;
}

.action {
    padding: .32rem .6rem;
    box-sizing: border-box;
    display: flex;
    height: 2.4rem;
}

.action-btn {
    border-radius: 1.2rem;
    border: none;
    background: #1ba784;
    flex: 1;
    font-size: .56rem;
    color: #fff;
}

.sum {
    padding: .48rem .64rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .56rem;
}

.num {
    display: flex;
}

.reduce,
.add {
    width: 1.12rem;
    height: 1.12rem;
    position: relative;
    outline: none;
    border: none;
    background: #f2f3f5;
}

input {
    height: 1.12rem;
    width: 1.28rem;
    outline: none;
    border: none;
    background: #f2f3f5;
    margin: 0 .08rem;
    font-size: .56rem;
    text-align: center;

    box-sizing: border-box;
    padding: 0;
    line-height: normal;
    vertical-align: middle;
    border-width: 0.02rem 0;
}

.reduce::after,
.add::after,
.add::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    height: .02rem;
    width: .56rem;
    background: #969799;
}

.add::before {
    width: .02rem;
    height: .56rem;
}


.show-body {
    height: 5.76rem;
    overflow-y: auto;
}

.show-group {
    margin: 0 .6rem .4rem;
    padding: .4rem 0 0;
    box-sizing: border-box;
}

.group-hd {
    padding: 0 0 .48rem;
    box-sizing: border-box;
    font-size: .64rem;
}

.color {
    display: flex;
}

.checked {
    display: flex;
}

.color-list {
    padding: .32rem;
    box-sizing: border-box;
    margin: 0 .4rem .4rem 0;
    font-size: .48rem;
    background: #f7f8fa;
    border-radius: .16rem;

}

.show-title {
    padding: .4rem .8rem .4rem 0;
}

.show-head {
    margin: 0 .6rem;
    display: flex;
}

.show-head img {
    width: 3.84rem;
    height: 3.84rem;
    margin: .4rem .4rem .4rem 0;
}

.buy {
    width: 15rem;
    height: 2rem;
    position: fixed;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
}

.icon {
    width: 1.92rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .4rem;
}

.left,
.right {
    width: 4.4rem;
    height: 1.6rem;
    line-height: 1.6rem;
    text-align: center;
    background: #d9f6ef;
    color: #1ba784;
    border-radius: .8rem 0 0 .8rem;
    font-size: .56rem;
}

.right {
    background: #1ba784;
    color: #fff;
    border-radius: 0 0.8rem 0.8rem 0;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}

.section {
    width: 15rem;
    box-sizing: border-box;
    padding: 0 .6rem .4rem;
    background: #fff;
    padding-top: .4rem;
}

.title {
    margin-top: .4rem;
    font-size: .64rem;
    color: #323233;
    background: #fff;
}

.brief {
    margin-top: .16rem;
    font-size: .48rem;
    color: #969799;
    background: #fff;
}

.price-current,
.price-origin {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.stock {
    margin-bottom: .4rem;
    padding: .4rem .6rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f2f3f5;
    background: #fff;
}

.stock p {
    font-size: .48rem;
    color: #969799;
}

.ticket {
    margin: 0 0 .4rem;
    padding: .4rem .64rem;
    font-size: .56rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.serve,
.search {
    padding: .4rem .64rem;
    background: #fff;
    font-size: .56rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.evaluate {
    margin-top: .4rem;
    background: #fff;
}

.evaluate-top {
    display: flex;
    font-size: .56rem;
    margin: 0 0 .4rem;
    padding: .4rem .64rem;
    justify-content: space-between;
}

.evaluate-content {
    padding: 0 .6rem;
}

.content-head {
    margin: 0 0 .4rem;
    display: flex;
    align-items: center;
}

.content-head img {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
}

.name {
    color: #323233;
    font-size: .56rem;
}

.content-foot {
    padding: .2rem 0 .4rem;
}

.content-foot p {
    font-size: .56rem;
    color: #969799;
}

.edit {
    font-size: .48rem;
    margin-top: .2rem;
}
</style>

<style>
.img p img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
}
</style>